<template>
  <div class="login-container">
    <div class="card">
      <div class="card-header">
        <!-- 蓝绿渐变圆形背景 + 树叶图标 -->
        <div class="logo">
          <img src="@/assets/logintop.png" alt="环保树叶图标" />
        </div>
        <h1 class="main-title">东软环保公众监督平台</h1>
        <p class="sub-title">网格员工作端系统</p>
      </div>
      
      <!-- 登录表单 -->
      <form class="form" @submit.prevent="login">
        <div class="input-group">
          <svg class="icon" viewBox="0 0 24 24">
            <path fill="#606E88" d="M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 12c-3.31 0-6-2.69-6-6h12c0 3.31-2.69 6-6 6zm6-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
          </svg>
          <input
            type="text"
            v-model="gridMemberForm.gmCode"
            placeholder="请输入登录编码"
            @focus="handleInputFocus"
            @blur="handleInputBlur"
            required
          />
        </div>
        
        <div class="input-group">
          <svg class="icon" viewBox="0 0 24 24">
            <path fill="#606E88" d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1 .9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-8-3c1.66 0 3 1.34 3 3v2H7V6c0-1.66 1.34-3 3-3zm7 12H5V10h10v6z"/>
          </svg>
          <input
            type="password"
            v-model="gridMemberForm.password"
            placeholder="请输入登录密码"
            @focus="handlePasswordFocus"
            @blur="handlePasswordBlur"
            required
          />
        </div>
        
        <button 
          class="submit-btn" 
          :class="{ loading: loading }"
          :disabled="!isFormValid || loading"
        >
          <span v-if="!loading">登录系统</span>
          <span v-else>
            <svg class="spinner" viewBox="0 0 50 50">
              <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
            </svg>
            登录中...
          </span>
        </button>
      </form>
      
      <div class="footer-links">
        <a href="#" class="link">
          <svg class="link-icon" viewBox="0 0 24 24">
            <path fill="#606E88" d="M18 11h-6v6h-4v-6H6v-4h4V6h6v4h4v2z"/>
          </svg>
          帮助中心
        </a>
        <a href="#" class="link">
          <svg class="link-icon" viewBox="0 0 24 24">
            <path fill="#606E88" d="M17 19H7V5h10v14zm-2-2H9V7h6v10zm4-14h-2v2h2V5zm0 16h-2v2h2v-2z"/>
          </svg>
          下载APP
        </a>
        <a href="#" class="link">
          <svg class="link-icon" viewBox="0 0 24 24">
            <path fill="#606E88" d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1 .9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-8-3c1.66 0 3 1.34 3 3v2H7V6c0-1.66 1.34-3 3-3zm7 12H5V10h10v6z"/>
          </svg>
          隐私政策
        </a>
      </div>
    </div>
    
    <!-- 环境警示广告栏 -->
    <div class="env-alert-banner">
      <div class="banner-title">环境破坏警示</div>
      <div class="alert-list" ref="alertListRef">
        <div 
          class="alert-item" 
          v-for="(item, index) in alertList" 
          :key="index"
          :class="{ 'active-alert': currentAlert === index }"
        >
          <div class="alert-icon">
            <i class="fa fa-exclamation-triangle"></i>
          </div>
          <div class="alert-text">
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <p class="copyright">© 2025 207集团股份有限公司 版权所有</p>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { inject } from 'vue';
import { setSessionStorage } from '../common.js';

const router = useRouter();
const axios = inject('axios');

const gridMemberForm = reactive({ gmCode: '', password: '' });
const loading = ref(false);
const isInputFocused = ref(false);
const isPasswordFocused = ref(false);
const isFormValid = ref(false);
const alertListRef = ref(null);

// 环境警示案例数据
const alertList = ref([
  { title: "亚马逊雨林大火", desc: "2019年持续3周的大火烧毁超190万公顷森林，数千物种濒临灭绝" },
  { title: "海洋塑料污染", desc: "太平洋垃圾带面积达160万平方公里，超过法国国土面积，威胁海洋生物生存" },
  { title: "印度新德里雾霾", desc: "2020年PM2.5浓度超安全值30倍，医院呼吸道病例激增，空气质量严重危害健康" },
  { title: "北极冰川消融", desc: "过去30年北极冰盖面积减少40%，北极熊生存栖息地大幅缩减，生态平衡被破坏" },
  { title: "热带雨林砍伐", desc: "每年约1300万公顷热带雨林消失，相当于每分钟损失20个足球场的森林面积" },
  { title: "长江白鲟灭绝", desc: "2020年正式宣布灭绝，这是首个因人类活动导致灭绝的中国特有珍稀鱼类" },
  { title: "澳大利亚山火", desc: "2019-2020年山火持续7个月，烧毁约1800万公顷土地，超30亿动物死亡" },
  { title: "土壤重金属污染", desc: "全球约33%的土壤存在中度至重度退化，影响农作物安全和人类健康" }
]);

// 轮播逻辑
const currentAlert = ref(0);
const alertInterval = ref(null);
const isAutoPlaying = ref(true);

const startAlertRotation = () => {
  if (alertInterval.value || alertList.value.length <= 1) return;
  alertInterval.value = setInterval(() => {
    currentAlert.value = (currentAlert.value + 1) % alertList.value.length;
    scrollToCurrentAlert();
  }, 3000); // 3秒切换
};

const stopAlertRotation = () => {
  if (alertInterval.value) {
    clearInterval(alertInterval.value);
    alertInterval.value = null;
  }
};

const scrollToCurrentAlert = () => {
  nextTick(() => {
    if (alertListRef.value) {
      const alertItems = alertListRef.value.querySelectorAll('.alert-item');
      if (alertItems[currentAlert.value]) {
        const itemRect = alertItems[currentAlert.value].getBoundingClientRect();
        const containerRect = alertListRef.value.getBoundingClientRect();
        const scrollAmount = itemRect.left - containerRect.left + (alertListRef.value.offsetWidth - itemRect.width) / 2;
        alertListRef.value.scrollTo({ left: scrollAmount, behavior: 'smooth' });
      }
    }
  });
};

// 表单输入交互
const handleInputFocus = () => { 
  isInputFocused.value = true; 
  checkFormValidity(); 
  stopAlertRotation(); 
};

const handleInputBlur = () => { 
  isInputFocused.value = false; 
  checkFormValidity(); 
  if (isAutoPlaying.value) startAlertRotation(); 
};

const handlePasswordFocus = () => { 
  isPasswordFocused.value = true; 
  checkFormValidity(); 
  stopAlertRotation(); 
};

const handlePasswordBlur = () => { 
  isPasswordFocused.value = false; 
  checkFormValidity(); 
  if (isAutoPlaying.value) startAlertRotation(); 
};

const checkFormValidity = () => { 
  isFormValid.value = gridMemberForm.gmCode.trim() && gridMemberForm.password.trim(); 
};

// 登录逻辑整合
const login = () => {
  if (!gridMemberForm.gmCode.trim()) {
    alert("登录编码不能为空！");
    return;
  }
  if (!gridMemberForm.password.trim()) {
    alert("登录密码不能为空！");
    return;
  }

  loading.value = true;
  const params = new URLSearchParams();
  params.append("gmCode", gridMemberForm.gmCode);
  params.append("password", gridMemberForm.password);

  axios.post("gridMember/getGridMemberByCodeByPass", params)
    .then((response) => {
      const res = response.data;
      console.log("完整返回值：", res);
      if (res.code === 6000 && res.t) {
        const member = res.t;
        console.log("gmId =", member.gmId);
        setSessionStorage("gridMember", member);
        router.push("/feedbackList");
      } else {
        alert("登录编码或密码输入不正确！");
      }
      loading.value = false;
    })
    .catch((error) => {
      console.error("请求异常：", error);
      alert("系统异常，请稍后重试");
      loading.value = false;
    });
};

onMounted(() => {
  startAlertRotation();
});

onUnmounted(() => {
  stopAlertRotation();
});
</script>


<style scoped>
/* 全局样式 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }

.login-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0A66C2, #26D0CE);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

/* 登录卡片 */
.card {
  width: 100%;
  max-width: 360px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 32px 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* 蓝绿渐变圆形背景 + 树叶图标 */
.card-header { margin-bottom: 24px; }
.logo {
  width: 70px;          
  height: 70px;
  margin: 0 auto 12px;  
  border-radius: 50%;   
  background: linear-gradient(135deg, #0A66C2, #26D0CE); 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;    
}
.logo img {
  width: 110%;          
  height: 110%;
  object-fit: cover;    
  object-position: center; 
}

.main-title {
  font-size: 17px;
  color: #1A2980;
  font-weight: 600;
  margin-bottom: 4px;
}
.sub-title {
  font-size: 13px;
  color: #606E88;
}

/* 输入组 */
.input-group {
  width: 100%;
  max-width: 280px;
  position: relative;
  margin-bottom: 18px;
}
.icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #606E88;
  transition: all 0.3s ease;
}
.input-group input {
  width: 100%;
  height: 44px;
  background: #F8F9FA;
  border: 1px solid #E0E7F5;
  border-radius: 24px;
  padding: 0 18px 0 46px;
  font-size: 14px;
  color: #1A2980;
  outline: none;
  transition: all 0.3s ease;
}
.input-group input:focus {
  border-color: #26D0CE;
  box-shadow: 0 0 0 5px rgba(38, 208, 206, 0.2);
}
.input-group input:focus + .icon {
  fill: #26D0CE;
  transform: translateY(-50%) scale(1.2);
}

/* 登录按钮 */
.submit-btn {
  width: 100%;
  max-width: 280px;
  height: 48px;
  background: linear-gradient(90deg, #0A66C2, #26D0CE);
  border: none;
  border-radius: 24px;
  font-size: 15px;
  color: #FFFFFF;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10, 102, 194, 0.35); }
.submit-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(10, 102, 194, 0.25); }
.submit-btn.loading { cursor: not-allowed; opacity: 0.8; transform: scale(0.98); }

/* 加载动画 */
.spinner {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  animation: spin 1s linear infinite;
}
.path { stroke: #FFFFFF; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; }

/* 底部功能链接 */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.link {
  color: #606E88;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.link:hover {
  color: #1A2980;
  background: rgba(10, 102, 194, 0.06);
  transform: translateY(-2px);
}
.link-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  fill: #606E88;
  transition: fill 0.3s ease;
}
.link:hover .link-icon { fill: #1A2980; }

/* 环境警示广告栏样式 */
.env-alert-banner {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  padding: 18px;
  margin: 20px 0;
  position: relative;
  z-index: 2;
}

.banner-title {
  font-size: 15px;
  color: #CC0033;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}

.alert-list {
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
  gap: 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.alert-item {
  min-width: 240px;
  scroll-snap-align: start;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.alert-item:hover, .alert-item.active-alert {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF6666;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  margin-right: 10px;
}

.alert-text h3 {
  font-size: 13px;
  color: #1A2980;
  margin-bottom: 6px;
  font-weight: 600;
}

.alert-text p {
  font-size: 11px;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

/* 版权信息 */
.copyright {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}

/* 动画定义 */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes dash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* 响应式适配 */
@media (max-width: 375px) {
  .login-container { padding: 15px; }
  .card { max-width: 100%; padding: 28px 20px; }
  .input-group, .submit-btn { max-width: 100%; }
  .logo { width: 60px; height: 60px; }
  .logo img { width: 115%; height: 115%; } 
  
  .env-alert-banner {
    padding: 14px;
    border-radius: 14px;
  }
  
  .alert-item {
    min-width: 220px;
    padding: 10px;
  }
  
  .alert-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .alert-text h3 {
    font-size: 12px;
  }
  
  .alert-text p {
    font-size: 10px;
  }
}
</style>